<template>
  <div class="profile">
    <el-row class="attention-notice">
      <el-col :span="16">
        <ul class="ul-flex">
          <li>
            <p>粉丝数</p>
            <p class="number">20458</p>
            <p class="dynamic">昨日无变化</p>
          </li>
          <li>
            <p>总阅读(播放)量</p>
            <p class="number">125025</p>
            <p class="dynamic">昨日无变化</p>
          </li>
          <li>
            <p>累计收益</p>
            <p class="number">1022</p>
            <p class="dynamic">昨日无变化</p>
          </li>
        </ul>
      </el-col>
      <el-col :span="8">
        <div class="notice">
          <h4>公告</h4>
          <p><i>09-04</i> 今日头条规范网络传播秩序专项行动公告（第六期）</p>
          <p><i>09-02</i>关于发文数量规则调整的公告</p>
          <p><i>08-26</i>关于「今日头条青云计划」奖励机制迭代的公告</p>
        </div>
      </el-col>
    </el-row>
    <el-row class="home-banner">
      <el-col :span="16">
        <el-carousel height="200px" :interval="6000">
          <el-carousel-item v-for="item in bannerList" :key="item.key">
            <img class="banner-img" :src="item" alt="banner" />
          </el-carousel-item>
        </el-carousel>
      </el-col>
      <el-col :span="8">
        <div class="btn-img">
          <img src="https://mokr.oss-cn-hangzhou.aliyuncs.com/custom/20201128.png" alt="创作者计划" />
        </div>
        <div class="btn-img mg-top-12">
          <img src="https://mokr.oss-cn-hangzhou.aliyuncs.com/custom/20201129.png" alt="青云计划" />
        </div>
      </el-col>
    </el-row>
    <el-row class="activity-hot">
      <el-col :span="16">
        <h4 class="create-activity-title">创作活动</h4>
        <ul class="create-activity-list">
          <li v-for="item in 8" :key="item">
            <el-card shadow="hover">
              <p class="m-card-title">寻找真知派</p>
              <p class="m-card-msg">200万签约金｜亿级流量曝光</p>
              <p class="m-card-tip">奖金最高20万元｜5252人参加</p>
            </el-card>
          </li>
        </ul>
      </el-col>
      <el-col :span="8">
        <div class="hot-create">
          <h4 class="create-hot-title">热点创作</h4>
          <div class="create-hot-list">
            <a class="hot-list-card" v-for="item in hotList" :key="item.num">
              <span class="list-num">{{ item.num }}</span>
              {{ item.title }}
              <span class="hot-word-icon" v-if="item.hotFlag">热</span>
            </a>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bannerList: [
        'https://mokr.oss-cn-hangzhou.aliyuncs.com/custom/banner001.jpg',
        'https://mokr.oss-cn-hangzhou.aliyuncs.com/custom/banner002.jpg',
        'https://mokr.oss-cn-hangzhou.aliyuncs.com/custom/banner003.jpg'
      ],
      hotList: [
        {
          num: 1,
          title: '夹带美“私货”的塞科协议',
          hotFlag: true
        },
        {
          num: 2,
          title: '国安遭连追2球2-2卓尔',
          hotFlag: true
        },
        {
          num: 3,
          title: '疫情后，农村为何掀起“盖房潮”',
          hotFlag: true
        },
        {
          num: 4,
          title: '广西再现百香果女孩惨剧',
          hotFlag: false
        },
        {
          num: 5,
          title: '至少21国日增确诊超千例',
          hotFlag: false
        },
        {
          num: 6,
          title: '这次美国可能轮到美国被制裁',
          hotFlag: false
        },
        {
          num: 7,
          title: '自动炒菜机器人亮相',
          hotFlag: true
        },
        {
          num: 8,
          title: '新冠肺炎治愈者：一切都很好',
          hotFlag: false
        },
        {
          num: 9,
          title: '塞尔维亚驻以使馆迁耶路撒冷',
          hotFlag: false
        },
        {
          num: 10,
          title: '禁止利用大数据分析杀熟',
          hotFlag: false
        }
      ]
    };
  }
};
</script>
<style lang="scss" scoped>
.profile {
  min-height: 100vh;
  background: #fff;
  padding: 0 64px 60px;
  .attention-notice {
    width: 100%;
    height: 160px;
    .ul-flex {
      display: flex;
      justify-content: space-around;
      text-align: center;
      li {
        flex: 1;
        font-size: 14px;
        color: #666;
        padding: 48px 0 14px 0;
        .number {
          line-height: 54px;
          height: 54px;
          font-size: 32px;
          font-weight: bold;
          color: #222;
          white-space: nowrap;
          cursor: pointer;
        }
        .dynamic {
          display: inline-block;
          font-size: 12px;
          background: #f8f8f8;
          padding: 4px 8px;
          border-radius: 8px;
        }
      }
    }
    .notice {
      padding: 18px 0 0 28px;
      h4 {
        display: inline-block;
        font-size: 15px;
        font-weight: bold;
        color: #fff;
        background: #3d89ff;
        border-radius: 4px;
        padding: 0 6px;
      }
      p {
        font-size: 14px;
        color: #333;
        height: 40px;
        line-height: 40px;
        cursor: pointer;
        i {
          margin-right: 12px;
        }
      }
    }
  }
  .home-banner {
    width: 100%;
    height: 200px;
    margin-top: 12px;
    .banner-img {
      width: 100%;
      height: 200px;
      cursor: pointer;
    }
    .btn-img {
      height: 94px;
      width: auto;
      padding-left: 28px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 3px;
        cursor: pointer;
      }
    }
    .mg-top-12 {
      margin-top: 12px;
    }
  }
  .activity-hot {
    width: 100%;
    margin-top: 32px;
    .create-activity-title {
      font-size: 20px;
      font-weight: 500;
      line-height: 24px;
    }
    .create-activity-list {
      display: flex;
      flex-wrap: wrap;
      margin-top: 20px;
      li {
        flex: 0 0 50%;
        cursor: pointer;
        .m-card-title {
          font-size: 16px;
          color: #333;
          line-height: 24px;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .m-card-msg {
          height: 40px;
          line-height: 20px;
          font-size: 14px;
          color: #999;
          margin-top: 6px;
        }
        .m-card-tip {
          font-size: 12px;
          color: #666;
          margin-top: 7px;
          line-height: 20px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    .hot-create {
      padding-left: 28px;
      .create-hot-title {
        font-size: 20px;
        font-weight: 500;
        line-height: 24px;
        padding-left: 28px;
      }
      .create-hot-list {
        width: 100%;
        padding: 10px 0;
        border-radius: 4px;
        border: 1px solid #f1f1f1;
        margin-top: 20px;
        .hot-list-card {
          display: inline-block;
          width: 100%;
          padding: 16px 24px;
          cursor: pointer;
          .list-num {
            margin-right: 14px;
            font-size: 16px;
            font-weight: 500;
            color: #999;
          }
          .hot-word-icon {
            margin-left: 8px;
            margin-top: 4px;
            width: 16px;
            height: 16px;
            color: #fff;
            font-size: 12px;
            line-height: 16px;
            border-radius: 2px;
            text-align: center;
            display: inline-block;
            vertical-align: 2px;
            flex-shrink: 0;
            background-color: #ff5e5e;
          }
        }
        a:hover {
          background: #f8f8f8;
        }
      }
    }
  }
}
</style>
